<template>
  <view class="container">
    <view class="header">
      <view class="left">
        <view class="avatar" :style="`--img: url(${avatar})`"></view>
      </view>
      <view class="right">
        <view class="username">{{ username }}</view>
        <view class="date">{{ date }}</view>
      </view>
    </view>
    <view class="content">
      <view class="title-line">
        <view class="type">{{ type }}</view>
        <view class="title">{{ title }}</view>
      </view>
      <view class="description">{{ description }}</view>
    </view>
    <view v-show="imageUrl.length" class="image-container">
      <image :src="imageUrl" mode="aspectFill" />
    </view>
    <view class="btn-line">
      <view class="btn" :style="`--icon: url(${comment_icon})`"></view>
      <view
        class="btn"
        :style="`--icon: url(${isLike ? like_icon : nolike_icon})`"
      ></view>
      <view
        class="btn"
        :style="`--icon: url(${isCollect ? collect_icon : nocollect_icon})`"
      ></view>
    </view>
    <view class="comment-box" v-show="commentList.length > 0">
      <Comment
        v-for="item in commentList"
        :avatar="base_url + item.avatar"
        :name="item.name"
        :text="item.text"
        :time="item.time"
        :key="item.id"
      />
    </view>
  </view>
</template>

<script setup>
import { base_url } from "../../api/config";
import { computed } from "vue";
import Comment from "./Comment.vue";

let comment_icon = base_url + "/static/comment.svg";
let like_icon = base_url + "/static/like.svg";
let nolike_icon = base_url + "/static/nolike.svg";
let collect_icon = base_url + "/static/collect.svg";
let nocollect_icon = base_url + "/static/nocollect.svg";

const props = defineProps({
  avatar: { type: String, default: "" },
  username: { type: String, default: "" },
  date: { type: String, default: "" },
  type: { type: String, default: "" },
  title: { type: String, default: "" },
  description: { type: String, default: "" },
  imageUrl: { type: String, default: "" },
  commentList: { type: Array, default: [] },
  isLike: { type: Number, default: 0 },
  isCollect: { type: Number, default: 0 },
});

const avatar = computed(() => {
  if (!props.avatar.startsWith("http")) {
    return base_url + props.avatar;
  } else {
    return props.avatar;
  }
});
</script>

<style scoped lang="less">
.container {
  box-sizing: border-box;
  padding: 3vw;

  .header {
    display: flex;
    align-items: center;
    gap: 2vw;

    .left {
      --size: 12vw;
      width: var(--size);
      height: var(--size);

      .avatar {
        width: 100%;
        height: 100%;
        border-radius: 50%;
        background-image: var(--img);
        background-size: contain;
        background-position: center;
        background-repeat: no-repeat;
      }
    }

    .right {
      .username {
        font-size: 4vw;
        font-weight: 900;
        margin-bottom: 1vw;
      }

      .date {
        font-size: 3vw;
        color: #888;
      }
    }
  }

  .content {
    font-size: 3vw;
    padding: 2vw 0;

    .title-line {
      display: flex;
      align-items: center;
      gap: 2vw;

      .type {
        flex-shrink: 0;
        padding: 0.5vw 3vw;
        background-color: rgb(230, 230, 230);
        border-radius: 4vw;

        &::before {
          content: "#";
          color: rgb(255, 147, 0);
        }
      }

      .title {
        font-weight: bold;
        white-space: nowrap;
        word-break: break-word;
        overflow: hidden;
        text-overflow: ellipsis;
        overflow-wrap: break-word;
        word-wrap: break-word;
      }
    }

    .description {
      font-size: 4vw;
      line-height: 1.5;
      color: #333;
      overflow-wrap: break-word;
      word-wrap: break-word;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 5;
      line-clamp: 5;
      overflow: hidden;
    }
  }

  .image-container {
    margin-top: 4vw;

    image {
      width: 100%;
      max-height: 150vw;
      border-radius: 2vw;
    }
  }

  .btn-line {
    display: flex;
    justify-content: flex-end;
    gap: 5vw;

    & > .btn {
      --size: 7vw;
      width: var(--size);
      height: var(--size);
      background-image: var(--icon);
      background-size: contain;
      background-position: center;
      background-repeat: no-repeat;
    }
  }

  .comment-box {
    margin-top: 3vw;
    padding: 3vw;
    background-color: #efefef80;
  }
}
</style>
